<!-- 登录页面 -->
<template>
	<view class="auth-container">
		<view class="main">
			<view class="auth-title">
				<view class="title">登录</view>
				<view class="subtitle">欢迎回来</view>
			</view>

			<view class="input-list">
				<view class="input-item">
					<input 
						v-model="form.username" 
						type="text" 
						placeholder="请输入账号" 
					/>
				</view>
				<view class="input-item">
					<input 
						v-model="form.password" 
						type="password" 
						placeholder="请输入密码" 
					/>
				</view>

                <view class="input-item code-input" v-if="captchaEnabled">
                    <input 
                        v-model="form.code" 
                        type="text" 
                        placeholder="请输入验证码" 
                    />

                    <image :src="captchaUrl" @click="getCaptcha" mode="widthFix"></image>
                </view>
			</view>

			<view class="auth-btn" @click="login">
				登录
			</view>

			<view class="bottom-links">
				<view class="link" @click="$path.navigateTo('/pages/auth/forget')">
					忘记密码
				</view>
				<view class="link" @click="$path.navigateTo('/pages/auth/register')">
					没有账号？去注册
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import { mapState } from 'vuex'
	export default {
		components: {
		},
		data() {
			return {
				form: {
					username: '',
					password: '',
					code: '', // 验证码
					loginIp: '',
					clientId : Vue.prototype.$config.clientid,
					grantType : 'password',
				},
				captchaUrl: '', // 验证码图片URL
                captchaEnabled : true,
            }
		},
		computed : {
			...mapState(['user']),
		},
		created() {
			// 页面创建时获取验证码
			this.getCaptcha();
		},
		methods: {
			// 获取验证码
			getCaptcha() {
				// 调用获取验证码接口
				this.$api('getCodeImage')
				.then(res => {
					if(res.code == 200){

                        let { data } = res;

                        this.captchaEnabled = data.captchaEnabled === undefined ? true : data.captchaEnabled;
                        if (this.captchaEnabled) {
                            this.captchaUrl = 'data:image/gif;base64,' + data.img;
                            this.form.uuid = data.uuid;
                        }
					}
				}).catch(err => {
					this.getCaptcha();
				})
			},
			login(){
				// 验证码验证
				if(!this.form.code) {
					return uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
				}
				this.$api('login', this.form)
				.then(res => {
					if(res.code == 200){
						uni.setStorageSync('token', res.data.access_token)
						this.$store.commit('getUserInfo')
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
				.catch(() => {
					// 登录失败时刷新验证码
					this.getCaptcha();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './common.scss';
	
	.code-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
		image{
            width: 35%;
            height: 90rpx;
            line-height: 90rpx;
        }
		input {
			width: 60%;
			text-align: center;
			padding: 0;
		}
		
		.code-img {
			width: 35%;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			border-radius: 45rpx;
			background: $uni-primary;
			color: #ffffff;
			font-size: 28rpx;
			overflow: hidden;
			
			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
	}
</style>
